<template>
    <div>
        <headerSearch :title="headTitle" :share="true" @done="gotobtn"></headerSearch>
        <div class="content" style="background-color: #f5f5f5;">
            <!-- 头部名片浮层 -->
            <div class="main_card_index" v-if="CardDetails.CardTemplate == 1">
                <div class="main_card_index_info-top"></div>
                <div class="main_card_index_info">
                    <div class="main_card_index_info_top clear">
                        <img :src="CardDetails.CardLogo" alt="">
                        <div class="main_card_index_info_center">
                            <h2>{{CardDetails.CardName}} <span>{{CardDetails.CardPosition}}</span></h2>
                            <p>{{CardDetails.CardCompany}}</p>
                        </div>
                    </div>
                    <div class="main_card_index_info_bottom">
                        <p>
                            <i class="iconfont icon-dianhua2"></i>
                            <a :href="'tel:' + CardDetails.CardPhone">{{CardDetails.CardPhone}}</a>
                            <a :href="'tel:' + CardDetails.CardPhone" class="small_span_color">立即通话</a>
                        </p>
                        <p>
                            <i class="iconfont icon-dianhua2"></i>
                            <span>{{CardDetails.CardEmail}}</span>
                        </p>
                        <p class="clear">
                            <i class="iconfont icon-dianhua2"></i>
                            <a href="javascript:void(0)">{{CardDetails.CardCompanyAddress}}</a>
                            <a href="javascript:void(0)" class="small_span_color" @click="location">马上定位</a>
                            <i class="iconfont icon-erweima fr" @click="erweimaClick()"></i>
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="main_card_index" v-else>
                <div class="main_card_index_info-top"></div>
                <div class="main_card_index_info">
                    <div class="main_card_index_info_top clear">
                        <h6>我是丑丑的模板2</h6>
                        <img :src="CardDetails.CardLogo" alt="">
                        <div class="main_card_index_info_center">
                            <h2><span>{{CardDetails.CardName}}</span> <span>{{CardDetails.CardPosition}}</span></h2>
                            <p>{{CardDetails.CardCompany}}</p>
                        </div>
                    </div>
                    <div class="main_card_index_info_bottom">
                        <p>
                            <i class="iconfont icon-dianhua2"></i>
                            <a :href="'tel:' + CardDetails.CardPhone">{{CardDetails.CardPhone}}</a>
                            <a :href="'tel:' + CardDetails.CardPhone" class="small_span_color">立即通话</a>
                        </p>
                        <p>
                            <i class="iconfont icon-dianhua2"></i>
                            <span>{{CardDetails.CardEmail}}</span>
                        </p>
                        <p class="clear">
                            <i class="iconfont icon-dianhua2"></i>
                            <a href="javascript:void(0)">{{CardDetails.CardCompanyAddress}}</a>
                            <a href="javascript:void(0)" class="small_span_color" @click="location">马上定位</a>
                            <i class="iconfont icon-erweima fr" @click="erweimaClick()"></i>
                        </p>
                    </div>
                </div>
            </div>
            <!-- 内容访问量 -->
            <div class="main_Headline_data" v-if="isShowTag">
                <small>访问量<em>2600</em></small>
                <small>人气值<em>2600</em></small>
                <small>分享数<em>2600</em></small>
                <small class="data_jin">#IT互联网</small>
                <small class="data_jin">#诚信</small>
                <small class="data_jin">#大道至简</small>
            </div>
            <!--公司简介=-->
            <div class="look_container">
                <div class="title_text_more" >
                    <h3>公司简介</h3>
                </div>  
                <div class="main-company-index-description">
                    <div class="option_description">
                        <!-- <img :src="options.log_img" alt="" v-if="options.log_img"> -->
                        <img src="../common/images/c_03.jpg" alt="">
                    
                        <div style="text-align: left;">
                            <!-- <h3>{{options.name}}</h3> -->
                            <h3>{{CardDetails.CardCompany}}</h3>
                            <p>{{CardDetails.CardCompanyDesc}}</p>
                        </div>
                    </div>
                    <div class="option_tagNames">
                        <span v-for="(biao, b) in tags" :key="b">{{biao.label_name}}</span>
                    </div>
                    <p>{{ CardDetails.CardCompanyDesc?CardDetails.CardCompanyDesc:'暂无简介' }}</p>
                </div>
                <a href="javascript:;" class="btn_more" @click="btn_more(CardDetails.c_id)">查看企业&nbsp;<i class="iconfont icon-xiangyou"></i></a>
            </div>
            <!-- 产品列表 -->
            <div class="main-company-index_product look_container" v-if="isShowProduct">
                <div class="title_text_more">
                    <h3>产品列表</h3>
                    <a href="javascript:void(0)">
                        更多<i class="iconfont icon-xiangyou"></i>
                    </a>               
                </div>  
                <!-- 三栏商品 -->
                <div class="host_item" id="js_host_item">
                   <!-- v-if="hostlist == ''" -->
                    <div class="emptyProduct" v-if="CardDetails.module.product.length == 0">
                        <img src="../common/images/empty.png" alt="">
                        <p>小主人，您的商品还没添加呢~请赶紧添加吧!</p>
                    </div>
                    <ul v-else>
                        <li v-for="(item, k) in CardDetails.module.product" :key="k" @click="jumpProduct(item.IDProduct)">
                            <a href="javascript:void(0)">
                                <img src="../common/images/cm_03.jpg" v-if="item.smallImg == null">
                                <img :src="item.smallImg" alt="" v-else>
                                
                                <!-- <span>{{host.chrName}}</span> -->
                                <span class="hui_title">{{item.chrName}}</span>
                                <!-- <span>已售<strong>{{host.NumS}}</strong>件</span> -->
                                <span>已售<strong>{{item.NumS}}</strong>件</span>
                            </a>
                        </li>
                    </ul>
                </div> 			
            </div>  
            <!-- 新闻动态 -->
            <div class="main-company-index_product look_container" v-if="isShowNews">
              <div class="title_text_more">
                <h3>新闻动态</h3>
                <router-link to="/newsList">更多<i class="iconfont icon-xiangyou"></i></router-link>
              </div>
              <div class="info_list_home_page">
                <div class="emptyProduct" v-if="CardDetails.module.news.length == 0">
                    <img src="../common/images/empty.png" alt="">
                    <p>他的企业产品空空如也</p>
                </div>
                <ul v-else v-for="(initem, t) in CardDetails.module.news" :key="t" >
                  <li @click="newsdetailClick(initem.IDNews)" v-if="initem.img.length < 2">
                    <router-link to="" class="clear">
                      <div class="info_list_item_left">
                        <img :src="initem.img[0]" alt="" v-if="initem.img[0]"> 
                        <img src="../common/images/cindex_41.jpg" v-else>
                      </div>
                      <!-- <p>{{initem.Title}}</p> -->
                      <p>{{initem.Title}}</p>
                      <p><span>{{initem.chrFrom}}</span><span>{{initem.dtCreate | dateFormat("yyyy-MM-dd")}}</span></p>
                      <!-- <p><span>{{initem.summary}}</span><span>{{initem.dtCreate}}</span></p> -->
                    </router-link>
                  </li>
                  <li  @click="newsdetailClick(initem.IDNews)" v-else>
                    <div class="info_home_page">
                      <!-- <p>{{initem.Title}}</p> -->
                      <p>{{initem.Title}}</p>
                      <ul>
                        <li v-for="(img, i) in initem.img" :key="i">
                          <a href="javascript:void(0)">
                            <img class="info_home_img" :src="img">
                          </a>
                        </li>
                      </ul>
                      <!-- <p class="info_time"><span>{{initem.summary}}</span><span>{{initem.dtCreate}}</span></p> -->
                      <p class="info_time"><span>{{initem.chrFrom}}</span><span>{{initem.dtCreate | dateFormat("yyyy-MM-dd")}}</span></p>
                    </div> 
                  </li>
                </ul>
              </div>
            </div>
            <!-- 底部我也要制作和保存到通讯录 -->
            <div class="metoo_btn">
              <!-- <button @click="createCardToo">我也要制作</button> -->
              <a href="/createCard"><button>我也要制作</button></a>
              <a :href="'tel:' + CardDetails.CardPhone"><button>保存到通讯录</button></a>
            </div>
            <div class="intop" v-show="isShow" @click="intopClick">
                <img class="intop_img" :src="this.QRcode" alt="">
            </div>
            <!-- 分享按钮 -->
            <div class="view_card_share" :style="'right: ' + position ">
              <div class="share_hide_btn" @click="showFunc"><i class="iconfont icon-fanhui"></i></div>
              <div class="share_hide_collection">
                <div class="hide_collection" @click="addCollect" v-if="!isCollect"><i class="iconfont icon-shoucang"></i><span>收藏</span></div>
                <div class="hide_collection" @click="removeCollect" v-else><i class="iconfont icon-shoucang"></i><span>已收藏</span></div>
                <div class="hide_collection" @click="gotobtn"><i class="iconfont icon-fenxiang2"></i><span>转发</span></div>
              </div>
            </div>
            <!-- 分享引导 -->
            <div class="Share_guidance" @click="gotobtn" v-show="shareShow"></div>
            <share :title="CardDetails.CardName + '的名片'" desc="快来了解我" :link="shareLink" :imgUrl="CardDetails.CardLogo" v-if="cardShow"></share>
        </div>
        <so-footer></so-footer>
    </div>
</template>

<script>
import headerSearch from '../public/header-search.vue';
import soFooter from '../components/footer-bar';
import share from '../components/WebShare.vue';
import wx from 'weixin-js-sdk';

    export default {
        data() {
            return {
                headTitle: '名片查看',
                options: '',   //企业名称
                position: '-2.66rem', // 默认样式
                shareShow: false,
                imgUrl: this.$path,
                access_token: '', // 令牌
                id: '', // 名片id
                CardDetails: {}, // 存放进来的名片数据
                Card: { // 请求数据
                    access_token: '',
                    user_id: 0
                },
                cardShow: false,
                isShow: false,
                QRcode: '',
                isCollect: false,
                isShowProduct: false, // 是否显示产品模块
                isShowNews: false, // 是否显示新闻模块
                isShowTag: false, // 是否显示变迁模块
                isAddModule: false, // 是否添加模块
                addModuleList: {}, // 存放添加模块列表
                importFileUrl: this.$path + '/index.php/api/uploadLogo', // 上传头像的接口
                shareLink: '',
                tags: [
                ]
            }
        },
        created() {
            let that = this;
            that.Card.access_token = window.localStorage.getItem('access_token')? window.localStorage.getItem('access_token') : '';
            that.Card.user_id = window.localStorage.getItem('userInfo')? JSON.parse(window.localStorage.getItem('userInfo')).uid : 0;
            that.id = that.$route.query.id;
            that.card_id = that.$route.query.card_id;
            that.shareShow = that.$route.query.shareShow == true? that.$route.query.shareShow : false;
            that.shareLink = location.href.split('#')[0].replace('&shareShow=true', '');
            // 动态加载百度地图
            if (!window.BMap) {
                var script = $('<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=' + this.$baidu_map_ak + '"></sc' + 'ript>');
                var script2 = $('<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=' + this.$baidu_map_ak + '&amp;services=&amp;t=20190123111209"></s' + 'cript>');
                $('body').append(script);
                $('body').append(script2);
            }
        },
        mounted() {
            let that = this;
            that.getcarddetail();
            that.checkCollect();
        },
        methods: {
            //二维码显示隐藏
            erweimaClick() { 
                this.path = this.$path + '/UserCard/viewCard?card_id='+ this.card_id;
                this.QRcode = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data='+this.path;
                this.isShow = !this.isShow;
            },
            //点击隐藏遮罩层
            intopClick() {
                this.isShow = false;
            },
            location: function(){
                var that = this;
                var url = location.href.split('#')[0];
                console.log(this.CardDetails.CardCompanyAddress);
                var myGeo = new BMap.Geocoder();
                myGeo.getPoint(this.CardDetails.CardCompanyAddress, function(point){
                    console.log(point)
                    if (point) {
                        that.$post(that.$path + '/index.php/api/v2/getJsapiTicket', {url: url}).then((res) => {
                            if(res.code == 200){
                                wx.config({
                                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                                    appId: res.data.appid, // 必填，公众号的唯一标识
                                    timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                                    nonceStr: res.data.noncestr, // 必填，生成签名的随机串
                                    signature: res.data.signature,// 必填，签名
                                    jsApiList: ['checkJsApi', 'openLocation'] // 必填，需要使用的JS接口列表
                                });
                                wx.ready(function(){
                                    wx.checkJsApi({
                                        jsApiList: ['openLocation'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                                        success: function(res) {
                                            console.log(res)
                                            // 以键值对的形式返回，可用的api值true，不可用为false
                                            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                                        }
                                    });
                                    wx.openLocation({
                                        latitude: point.lat, // 纬度，浮点数，范围为90 ~ -90
                                        longitude: point.lng, // 经度，浮点数，范围为180 ~ -180。
                                        name: '这是' + that.CardDetails.CardName + '的定位，你还想我写点什么？', // 位置名
                                        address: that.CardDetails.CardCompanyAddress, // 地址详情说明
                                        scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
                                        infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
                                    });
                                    
                                });
                            }
                        })
                    }else{
                        that.$openTips({
                            text: '对方地址不详',
                            time: 2000
                        })
                    }
                }, "");
            },
             //获取标签列表
            getLabellist(c_id){
                let that = this;
                that.$fetch(that.$path + '/index.php/api/c/label/'+c_id).then((response) => {
                    that.tags = response.data;
                    console.log('获取标签列表',response);
                })
            },
            //获取当前企业的详细内容
            checkCollect: function(){
                var that = this;
                if(!that.Card.user_id == 0 && !that.Card.access_token == ''){
                    console.log('check')
                    var data = that.Card;
                    this.$post(this.$path + '/index.php/api/checkCollect/' + that.card_id, data).then((response) => {
                        if(response.code == 200){
                            that.isCollect = response.data;
                        }
                    })
                }
            },
            

            // createCardToo: function(){
            //     this.$router.push({
            //         path: '/UserCard/createCard',
            //     })
            // },
            // addTongxunlu: function(){
            //     console.log('addTongxunlu');
            // },
            /**
             * 获取名片详情
             */
            getcarddetail() {
                this.$post(this.$path + '/index.php/api/collectCardDetails/' + this.id,  {user_id: this.Card.user_id}).then((response) => {
                // 初始化数据
                if (response.code == 200) {
                    this.CardDetails = response.data;
                    // 是否显示模块
                    if (response.data.module.tag !== '0') {
                        this.isShowTag = true;
                    } else {
                        this.isShowTag = false;
                    }
                    if (response.data.module.product !== '0') {
                        this.isShowProduct = true;
                    } else {
                        this.isShowProduct = false;
                    }
                    if (response.data.module.news !== '0') {
                        this.isShowNews = true;
                    } else {
                        this.isShowNews = false;
                    }
                    this.getLabellist(response.data.c_id);
                }
        
                })
                // console.log(Object.keys(this.addModuleList))
            },
            /*********名片基本信息*********/
            beforeAvatarUpload: function() {
        
            },
            /**
                 * 头像上传后回调
                 */
            handleAvatarSuccess: function(e) {
                console.log(e.path);
                this.CardDetails.CardLogo = e.path;
                var data = this.Card;
                data['CardLogo'] = e.path;
                this.$post(this.$path + '/index.php/api/editCardLogo/' + this.card_id, data).then((response) => {
                console.log(response);
        
                })
            },
            // 去查看企业
            btn_more(c_id) {
                if(this.$system != 'ios'){
                    this.$router.push({
                        path: '/userCenter/companyIndex',
                        query: {
                            c_id: c_id
                        }
                    })
                }else{
                    window.location.href = '/userCenter/companyIndex?c_id=' + c_id;
                }       
            },
            share: function(){
                this.position_share = 0;
            },
            cancel: function(){
                this.position_share = '-10rem';
            },
            //点击商品查看详情
            jumpProduct(val){
              console.log(val);
              this.$router.push({
                  path: '/productDetail',
                  query: {id: val}
              })
            },
            //点击新闻详情
            newsdetailClick(val) {
                this.$router.push({ path: '/newsDetail',query: {id: val}});
            },
            share: function(){
              this.position_share = 0;
            },
            /**
             * 分享开关
             */
            showFunc() {
              if (this.position == '-2.66rem') {
                this.position = '-0.55rem';
              } else {
                this.position = '-2.66rem'
              }
            },
            // 加入收藏
            addCollect: function(){
                var that = this;
                if(this.Card.user_id == 0 || this.Card.access_token == ''){
                    this.$openTips({
                        text: '请先登陆',
                        time: 2000
                    }) 
                    this.$router.push({
                        path: '/login',
                    })
                }else{
                    var data = this.Card;
                    data.from = 'collect';
                    data.id = this.CardDetails.id;
                    this.$post(this.$path + '/index.php/api/addCollect/' + this.card_id, data).then((response) => {
                        if(response.code == 200){
                            that.$openTips({
                                text: response.msg,
                                time: 2000
                            })
                            that.isCollect = true;
                        }
                    })
                }
            },
            // 已收藏
            removeCollect: function(){
                var that = this;
                if(this.Card.user_id == 0 || this.Card.access_token == ''){
                    this.$openTips({
                        text: '请先登陆',
                        time: 2000
                    }) 
                    this.$router.push({
                        path: '/login',
                    })
                }else{
                    var data = this.Card;
                    data.from = 'collect';
                    this.$post(this.$path + '/index.php/api/removeCollect/' + this.card_id, data).then((response) => {
                        if(response.code == 200){
                            that.$openTips({
                                text: response.msg,
                                time: 2000
                            })
                            that.isCollect = false;
                        }
                    })
                }
            },
            // 点击三个点提示分享引导
            gotobtn() {
              this.shareShow = !this.shareShow;
              this.cardShow = true;
            },
        },
        components: {
            headerSearch,
            soFooter,
            share
        }
    }
</script>

<style>
/* 名片式的模块 */
.look_container {
  width: 7rem;
  margin: 0 auto;
  border-radius: 4px;
}
.main_card_index {
    height: 4.4rem;
}
/* 头部浮层底部的红色部分 */
.main_card_index .main_card_index_info-top {
    height: 2.16rem;
    width: 100%;
    background-color: #e50838;
    position: absolute;
    top: 0;
    left: 0;
}
/* 头部浮层信息 */
.main_card_index .main_card_index_info {
    width: 7rem;
    height: 4.2rem;
    background-color: #fff;
    border-top-left-radius: 20px;
    position: absolute;
    left: 50%;
    margin-left: -3.5rem;
}
.main_card_index_info .main_card_index_info_top img {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    float: left;
    margin: 0.3rem;
    box-sizing: border-box;
}
.main_card_index_info_top .main_card_index_info_center {
    float: left;
    text-align: left;
    width: 55%;
    margin-top: 0.46rem;
    box-sizing: border-box;
}
.main_card_index_info_center h2 {
    font-size: 0.34rem;
    color: #000;
    height: 0.48rem;
    line-height: 0.48rem;
}
.main_card_index_info_center h2 span {
    font-size: 0.28rem;
    color: #333;
}
.main_card_index_info_center p {
    font-size: 0.28rem;
    color: #333;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    width: 3.4rem;
    height: 0.48rem;
    line-height: 0.48rem;
}
/* .main_card_index_info_top .main_card_index_info_right {
    float: right;
    box-sizing: border-box;
    font-size: 0.28rem;
} */
/* 头部浮层底部 */
.main_card_index_info_bottom {
    border-top: 1px solid #d8d8d8;
    padding: 0.3rem;
    box-sizing: border-box;
}
.main_card_index_info_bottom p {
    font-size: 0.28rem;
    color: #e50838;
    text-align: left;
    line-height: 0.56rem;
    height: 0.56rem;
}
.main_card_index_info_bottom p a {
    font-size: 0.28rem;
    color: #e50838;
}
.main_card_index_info_bottom p .icon-dianhua2 {
    width: 0.36rem;
    height: 0.36rem;
    background-color: #e50838;
    font-size: 0.22rem;
    color: #fff;
    border-radius: 50%;
    padding: 0.1rem;
    line-height: 0.36rem;
    box-sizing: border-box;
    text-align: center;
}
.main_card_index_info_bottom p .small_span_color {
    background-color: #e50838;
    padding: 0.08rem;
    border-radius: 2px;
    color: #fff;
    font-size: 0.22rem;
    margin-left: 0.2rem;
    display: inline-block;
    box-sizing: border-box;
    line-height: 0.24rem;
}
.main_card_index_info_bottom p .icon-erweima {
    font-size: 0.4rem;
    color: #999;
}

/* 访问头条 */
.main_Headline_data {
    width: 7rem;
    background-color: #fff;
    margin: 0 auto;
    padding: 0.1rem 0;
    height: 0.6rem;
    line-height: 0.6rem;
    margin-bottom: 0.2rem;
}
.main_Headline_data small{
    color: #999;
    font-size: 0.36rem;
    transform: scale(0.56);
    display: block;
    line-height: 0.44rem;
    float: left;
    margin: 0 -0.315rem;
}
.main_Headline_data small em {
    color: #e50838;
}
.main_Headline_data .data_jin {
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    padding: 0 0.1rem;
    margin-top: -0.1rem;
    height: 0.6rem;
    line-height: 0.6rem;
    box-sizing: border-box;
    text-align: center;
}

/* 公司简介 */

.main-company-index-description {
	padding-bottom: 0.2rem;
    background-color: #fff;
}
.main-company-index-description .option_description {
	display: flex;
	justify-content: flex-start;
	padding: 0 0.2rem;
}
.main-company-index-description .option_description img{
	width: 0.7rem;
	height: 0.7rem;
	margin-right: 0.4rem;
}
.main-company-index-description .option_description h3 {
	font-size: 0.34rem;
	color: #333;
	line-height: 0.36rem;
}
.main-company-index-description .option_description p {
	font-size: 0.18rem;
	color: #999;
	padding: 0;
	line-height: 0.46rem;
}
.main-company-index-description .company_description {
    border: 1px dashed #d8d8d8;
    height: auto;
    line-height: 0.42rem;
    margin: 0 .2rem;
    padding: 0.1rem;
		
}
.main-company-index-description p {
    font-size: 0.26rem;
    color: #333;
    text-align: left;
    padding: 0.2rem;
}
.option_tagNames {
    margin: 0;
    padding: 0 .2rem;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 0.1rem;
}
.option_tagNames span {
    font-size: .22rem;
    background-color: #999;
    color: #fff;
    float: left;
    margin-right: .1rem;
    box-sizing: border-box;
    margin-bottom: 0.1rem;
    display: inline-block;
    text-align: center;
    /* height: 0.36rem; */
    line-height: 0.46rem;
}
/* 查看更多企业信息 */ 
.btn_more {
    font-size: 0.26rem;
    color: #e50838 !important;
    display: block;
    padding-bottom: 0.2rem;
    background-color: #fff;
    margin-top: -0.2rem;
    padding-top: 0.2rem;
}
/* 企业商品 */
.main-company-index_product {
	background-color: #fff;
	margin-top: 0.2rem;
}
.main-company-index_product .hui_title {
    width: 2.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}

#js_host_item {
  padding: 0.12rem;
}
#js_host_item ul>li {
  margin-right: 0;
}
#js_host_item img {
  width: 2rem;
  height: 2rem;
}
/* 产品为空 */
#js_host_item .emptyProduct {
  padding: 0 0 0.2rem;
  box-sizing: border-box;
}
#js_host_item .emptyProduct img {
  width: 1.56rem;
  height: 1.22rem;
  margin: 0 auto;
}
#js_host_item .emptyProduct p {
  font-size: 0.26rem;
  color: #999;
  text-align: center;
}

/* 新闻动态 */
.info_list_home_page ul>li {
    position: relative;
    border-bottom: 1px solid #d8d8d8;
    padding: 0.2rem;
    box-sizing: border-box;
}
.info_list_home_page ul>li img {
    width: 1.2rem;
    display: inline-block;
    height: 100%;
    float: left;
    margin-right: 0.2rem;
}
.info_list_home_page ul>li p {
    font-size: .28rem;
    color: #333;
    text-align: left;
}
.info_list_home_page ul>li p:last-child {
    font-size: .22rem;
    color: #999;
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 75%;
    bottom: 0.2rem;
    right: 0.2rem;
}

/* 新闻为空 */
.info_list_home_page .emptyProduct {
  padding: 0 0 0.2rem;
  box-sizing: border-box;
}
.info_list_home_page .emptyProduct img {
  width: 1.56rem;
  height: 1.22rem;
  margin: 0 auto;
}
.info_list_home_page .emptyProduct p {
  font-size: 0.26rem;
  color: #999;
  text-align: center;
}


/* 多图新闻 */
.info_home_page p {
    font-size: .28rem;
    color: #333;
    text-align: left;
    margin-bottom: 0.2rem;
}
.info_home_page ul {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.3rem;
}
.info_home_page ul>li {
    margin-right: 0.16rem;
    padding: 0 !important;
}
.info_home_page ul>li .info_home_img {
    width: 2.04rem;
    height: 1.2rem;
    float: left;
    display: inline-block;
    margin-right: 0.1rem;
}

/* 多图新闻 */
.info_home_page .info_time {
    width: 100% !important;
    position: absolute !important;
    right: 0 !important;
    left: 0;
    margin-bottom: -0.2rem;
    line-height: 0.4rem;
    padding: 0 0.2rem;
} 
/* 底部制作的两个按钮 */
.metoo_btn {
  display: flex;
  justify-content: space-between;
  margin: 0.2rem 0 0.4rem;
}
.metoo_btn a {
  flex: 1;
  margin: 0.2rem;
  font-size: 0.3rem;
  padding: 0.2rem 0.6rem;
  background-color: #e50838;
  border-radius: 4px;
  outline: none;
  border: 0;
  box-sizing: border-box;
}
.metoo_btn button {
  color: #fff;
}
/* 分享按钮 */
.view_card_share {
    position: fixed;
    height: 2rem;
    width: 3rem;
    font-size: 0.26rem;
    display: flex;
    top: 50%;
    margin-top: -1.5rem;
}
.view_card_share .share_hide_btn {
    width: .8rem;
    height: .6rem;
    border-radius: 50% 0 0 50%;
    border-left: 1px solid #999;
    text-align: left;
    background-color: #fff;
    line-height: 0.6rem;
    top: 54%;
    position: absolute;
    z-index: 100;
    color: #e50838;
}
.share_hide_collection {
    margin-left: .6rem;
    color: #333;
    position: absolute;
    top: 36%;
    z-index: 100;
}
.share_hide_collection .hide_collection {
    margin: .08rem 0;
    border: 1px solid #ccc;
    background-color: #fff;
    line-height: .3rem;
    border-radius: .28rem;
    padding: 0.1rem 0.4rem;
}
.share_hide_collection .hide_collection .icon-shoucang {
  color: #e50838;
  margin-right: 0.12rem;
}
.share_hide_collection .hide_collection .icon-fenxiang2 {
  color: #FF9938;
  margin-right: 0.12rem;
}
/* 分享引导 */
.Share_guidance {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../common/images/share.png') no-repeat;
    background-size: cover;
    z-index: 100;
    opacity: 0.8;
}

/* 二维码遮罩层 */
.intop {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}
.intop img {
    width: 30%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -15%;
    margin-top: -15%;
    z-index: 12;
}
</style>